<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_95')}}</h2>
            <div class="personCon">
                <div class="leftpanel">
                    <h2 class="persontitle" v-show="idType==1">{{$t('l.add_7')}}</h2>
                    <h2 class="persontitle" v-show="idType!==1">{{$t('l.add_155')}}</h2>
                    <div class="resetpsdbar clearfix" style="width:612px;" v-show="verifiedStatus==0 &&  idType!==1">
                        <div class="putgroupbar fl">
                            <p class="title">{{$t('l.personal_97')}}</p>
                            <div class="putgroup">
                                <input class="comput small disabled" disabled v-model="country">
                                <p class="errortext"></p>
                            </div>
                            <p class="title">{{$t('l.personal_57')}}</p>
                            <div class="putgroup">
                                <input class="comput small disabled" disabled v-model="username">
                                <p class="errortext"></p>
                            </div>
                        </div>
                        <div class="putgroupbar fr">
                            <p class="title">{{$t('l.add_8')}}</p>
                            <div class="putgroup">
                                <input class="comput small disabled" disabled v-model="idNumType">
                                <p class="errortext"></p>
                            </div>
                            <p class="title">{{$t('l.add_9')}}</p>
                            <div class="putgroup">
                                <input class="comput small disabled" disabled v-model="idNumber">
                                <p class="errortext"></p>
                            </div>
                        </div>
                        <div class="uploadDoc clearfix">
                            <p class="title">{{$t('l.personal_108')}}</p>
                            <div class="uploadbar">
                                <label for="documentphoto1" class="uploadlabel">
                                    <input type="file" id="documentphoto1" @change="handleFileChange($event)" ref="documentphoto1" style="display:none;">
                                    <div class="uploadimgbg">
                                        <span class="addimgbg"><img src="../../assets/images/ptbg.png"></span>
                                    </div>
                                    <span class="showupimg" v-show="documentphoto1">
                                        <img :src="img1">
                                    </span>
                                </label>
                                <p class="uploadtext">{{$t('l.personal_109')}}</p>
                            </div>
                            <div class="uploadbar">
                                <label for="documentphoto2" class="uploadlabel">
                                    <input type="file" id="documentphoto2" @change="handleFileChange($event)" ref="documentphoto2" style="display:none;">
                                    <div class="uploadimgbg">
                                        <span class="addimgbg" v-if="countryid=='cn'"><img src="../../assets/images/ptbg2.png"></span>
                                        <span class="addimgbg" v-else><img src="../../assets/images/ptbg2.png"></span>
                                    </div>
                                    <span class="showupimg" v-show="documentphoto2">
                                        <img :src="img2">
                                    </span>
                                </label>
                                <p class="uploadtext">{{$t('l.personal_110')}}</p>
                            </div>
                            <div class="uploadbar">
                                <label for="documentphoto3" class="uploadlabel">
                                    <input type="file" id="documentphoto3" @change="handleFileChange($event)" ref="documentphoto3" style="display:none;">
                                    <div class="uploadimgbg">
                                        <span class="addimgbg"><img src="../../assets/images/ptbg3.png"></span>
                                    </div>
                                    <span class="showupimg" v-show="documentphoto3">
                                        <img :src="img3">
                                    </span>
                                </label>
                                <p class="uploadtext">{{$t('l.personal_111')}}</p>
                            </div>
                        </div>
                        <a class="btn changebtn" @click="c2Auth">{{$t('l.other_a_64')}}</a>
                    </div>
                    <div class="resetpsdbar clearfix" style="width:612px;" v-show="verifiedLevel<3 &&  idType==1">
                        <div class="gaojibox">
                            <img src="../../assets/images/c2logo.png">
                            <h3>{{$t('l.add_145')}}</h3>
                            <div class="qrcodebox" ref="downqrcode">

                            </div>
                            <p>{{$t('l.add_158')}}</p>
                        </div>
                    </div>
                    <!--审核中-->
                    <div class="resetpsdbar" v-show="verifiedStatus==1">
                        <div class="bindsuc" style="padding-top:100px;">
                            <img src="../../assets/images/indent.png" style="width:223px;height:154px;">
                            <h2>{{$t('l.personal_112')}}！</h2>
                            <p>{{$t('l.personal_113')}}。</p>
                        </div>
                    </div> 
                    <!--审核失败-->
                    <div class="resetpsdbar" v-show="idType!==1 && verifiedStatus==2">
                        <div class="bindsuc" style="padding-top:100px;">
                            <img src="../../assets/images/indentfalse.png" style="width:223px;height:154px;">
                            <h2>{{$t('l.personal_114')}}！</h2>
                            <p style="padding-bottom:15px;">{{c2VerifyFailureReason}}</p>
                            <p>{{$t('l.personal_115')}}</p>
                            <a class="btn changebtn" @click="verifiedStatus=0">{{$t('l.personal_116')}}</a>
                        </div>
                    </div>
                    <!--审核成功-->
                    <div class="resetpsdbar" v-show="verifiedLevel==3 && verifiedStatus==3">
                        <div class="bindsuc" style="padding-top: 0;">
                            <img style="padding-top:100px;" src="../../assets/images/sucico.png">
                            <h2>{{$t('l.add_153')}}！</h2>
                        </div>
                    </div> 
                </div>
                <div class="rightpanel" v-show="idType==1">
                    <div class="authpabel">
                        <h2>{{$t('l.add_6')}}</h2>
                        <div class="authintro">
                            <div class="isAuth active"><i></i>{{$t('l.add_10')}}</div>
                            <p class="permission">- {{$t('l.personal_100')}} -</p>
                            <p class="permission">- {{$t('l.personal_101')}} -</p>
                        </div>
                    </div>
                    <div class="authpabel">
                        <h2>{{$t('l.add_12')}}</h2>
                        <div class="authintro">
                            <div class="isAuth" v-if="verifiedStatus==0"><i></i>{{$t('l.personal_4')}}</div>
                            <div class="isAuth authing" v-else><i></i>{{$t('l.add_10')}}</div>
                            <p class="permission">- {{$t('l.header_2')}}-</p>
                            <p class="permission">- {{$t('l.personal_104')}} -</p>
                            <p class="permission">- {{$t('l.personal_107')}} -</p>
                        </div>
                    </div>
                </div>
                <div class="rightpanel" v-show="idType!==1">
                    <div class="authpabel">
                        <h2>{{$t('l.add_149')}}</h2>
                        <div class="authintro">
                            <div class="isAuth active"><i></i>{{$t('l.add_10')}}</div>
                            <p class="permission">- {{$t('l.personal_100')}} -</p>
                            <p class="permission">- {{$t('l.personal_101')}} -</p>
                        </div>
                    </div>
                    <div class="authpabel">
                        <h2>{{$t('l.add_150')}}</h2>
                        <div class="authintro">
                            <div class="isAuth" v-if="verifiedStatus==0"><i></i>{{$t('l.personal_4')}}</div>
                            <div class="isAuth authing" v-else><i></i>{{$t('l.add_11')}}</div>
                            <p class="permission">- {{$t('l.header_2')}}-</p>
                            <p class="permission">- {{$t('l.personal_104')}} -</p>
                        </div>
                    </div>
                    <div class="authpabel">
                        <h2>{{$t('l.personal_105')}}</h2>
                        <div class="authintro">
                            <div class="isAuth"><i></i>{{$t('l.add_152')}}</div>
                            <p class="permission">- {{$t('l.personal_107')}} -</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import lrz from 'lrz'
import {api} from '@/api/api';
import QRCode from 'qrcodejs2'
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    data(){
        return {
            documentphoto1:"",
            documentphoto2:"",
            documentphoto3:"",
            isIdent:false,
            intro:"",
            country:"",
            countryid:'',
            idType:1,
            idNumType:"",
            username:"",
            idNumber:"",
            verifiedStatus:0,
            img1:"",
            img2:"",
            img3:"",
            c2VerifyFailureReason:""
        }
    },
    created(){
        this.baseinfo();
        
    },
    methods:{
        qrcode() {
            let that = this;
            let qrcode = new QRCode(this.$refs.downqrcode, {
                width: 100,  
                height: 100,
                text: window.location.origin+"/#/h5/download", // 二维码地址
                colorDark : "#000",
                colorLight : "#fff",
            })
        },
        //基本信息
        async baseinfo(){
            let that = this;
            let res = await api.baseinfo()
            if(res.data.code==0){
                that.currencyInfo = res.data.data.currencyInfo;
                let intro = res.data.data.info;
                this.countryid = intro.countryCode;
                this.country = intro.country;
                this.username = intro.fullName;
                this.idNumber = intro.idNumber;
                this.idType = intro.idType;
                this.verifiedStatus = intro.verifiedStatus;
                this.verifiedLevel = intro.verifiedLevel;
                this.c2VerifyFailureReason = res.data.data.c2VerifyFailureReason;
                if(intro.idType==1){
                    this.idNumType = this.$t('l.personal_119')
                }else if(intro.idType==2){
                    this.idNumType = this.$t('l.personal_120')
                }else if(intro.idType==3){
                    this.idNumType = this.$t('l.personal_121')
                }
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        handleFileChange(data){
            let that = this;
            let file = data.target.files; 
            if (!file || !window.FileReader) return;
            if (/^image/.test(file[0].type)) {
                // 创建一个reader
                var reader = new FileReader();
                reader.readAsDataURL(file[0]);
                reader.onloadend = function (e) {
                    that.filepath = e.target.result;
                    if(data.target.id=="documentphoto1"){
                        that.img1 = e.target.result;
                    }else if(data.target.id=="documentphoto2"){
                        that.img2 = e.target.result;
                    }else{
                        that.img3 = e.target.result;
                    }
                    lrz( file[0], [ ] )  
                        .then(function(rst) {
                            //成功时执行
                            that.uploadImg(rst.base64,data.target.id);
                        }).catch(function(error) {
                            //失败时执行
 
                        }).always(function() {
                            //不管成功或失败，都会执行

                        })
                };
            }
        },
        //上传
        async uploadImg(data,id){
            let that = this;
            let res = await api.uploadImg({
                file:data
            })
            if(res.data.code==0){
                if(id=="documentphoto1"){
                    that.documentphoto1 = res.data.data;
                }else if(id=="documentphoto2"){
                    that.documentphoto2 = res.data.data;
                }else{
                    that.documentphoto3 = res.data.data;
                }
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //C2认证提交
        async c2Auth(data,id){
            let that = this;
            let res = await api.secondIdentity({
                front:that.documentphoto1,
                back:that.documentphoto2,
                handler:that.documentphoto3
            })
            if(res.data.code==0){
                that.$layer.msg(this.$t('l.other_a_41'));
                that.baseinfo()
            }else if(res.data.code==1040007){
                that.$layer.msg(this.$t('l.add_105'));
            }else if(res.data.code==1040008){
                that.$layer.msg(this.$t('l.add_106'));
            }else if(res.data.code==1040009){
                that.$layer.msg(this.$t('l.add_107'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        }
    },
    mounted() {
        this.qrcode();
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .rightpanel{
        .authpabel{
            border-radius:9px;
            border:1px solid rgba(233,238,244,1);
            overflow:hidden;
            margin-top:-10px;
            &:first-child{
                margin-top:0;
            }
            &:last-child{
                .authintro{
                    height:200px;
                    .permission{
                        margin-top:10px;
                    }
                }
            }
            h2{
                height:50px;
                background:rgba(249,249,255,1);
                border-bottom:1px solid rgba(233,238,244,1);
                line-height:50px;
                text-align:center;
                font-size:16px;
                font-familyA:"PingFangSC-Medium";
                font-weight:500;
                color:rgba(51,56,94,1);
            }
            .authintro{
                padding-top:16px;
                height:185px;
                box-sizing: border-box;
                text-align:center;
                .isAuth{
                    height:34px;
                    padding:0 12px 0 18px;
                    text-align:center;
                    background:rgba(243,245,255,1);
                    border-radius:4px;
                    border:1px solid #2D8DFE;
                    font-size:14px;
                    font-weight:400;
                    color:#2D8DFE;
                    line-height:34px;
                    display:inline-block;
                    margin-bottom:15px;
                    i{
                        display:inline-block;
                        vertical-align:middle;
                        width:16px;
                        height:19px;
                        margin-right:10px;
                        background:url(../../assets/images/authFalse.png) no-repeat center;
                    }
                    &.active{
                        background:rgba(246,255,237,1);
                        border:1px solid rgba(183,235,143,1);
                        color:#52C41A;
                        i{
                            background:url(../../assets/images/authTrue.png) no-repeat center;
                        }
                    }
                    &.authing{
                        background:rgba(255,251,230,1);
                        border:1px solid rgba(255,229,143,1);
                        color:#F78900;
                        i{
                            background:url(../../assets/images/authing.png) no-repeat center;
                        }
                    }
                }
                p{
                    font-size:14px;
                    font-weight:400;
                    color:rgba(51,56,94,1);
                    line-height:20px;
                    text-align:center;
                    padding-bottom:9px;
                }
            }
        }
    }
    .leftpanel{
        .resetpsdbar{
            width:518px;
            margin:58px auto;
            .gaojibox{
                text-align:center;
                h3{
                    font-size:16px;
                    color:#33385E;
                    line-height:120%;
                    padding-top:5px;
                }
                p{
                    font-size:14px;
                    color:rgba(51,56,94,0.6);
                    line-height:100%;
                    padding-top:10px;
                }
                .qrcodebox{
                    padding:15px;
                    width:120px;
                    height:120px;
                    box-sizing: border-box;
                    margin:0 auto;
                }
            }
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .padbtm{
                padding-bottom:20px;
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
                clear:both;
            }
            .putgroupbar{
                width:270px;
            }
            .uploadDoc{
                padding-top:40px;
                clear:both;
                .uploadbar{
                    float:left;
                    margin-left:12px;
                    width:195px;
                    height:160px;
                    background:rgba(255,255,255,1);
                    box-shadow:0px 3px 12px 0px rgba(197,202,213,0.25);
                    border-radius:2px;
                    text-align:center;
                    position:relative;
                    &:nth-of-type(1){
                        margin-left:0;
                    }
                    input[type=file]{display:none;}
                    .addimgbg{
                        display:block;
                        height:128px;
                        margin:0 auto 10px;
                        text-align:center;
                        line-height:128px;
                        box-sizing:border-box;
                        img{
                            vertical-align: middle;
                        }
                    }
                    .uploadtext{
                        font-size:14px;
                        font-weight:400;
                        color:#fff;
                        line-height:32px;
                        text-align:center;
                        position:absolute;
                        bottom:2px;
                        left:0;
                        width:100%;
                        height:32px;
                        background:rgba(131,131,248,0.6);
                        
                    }
                    .upimg{
                        max-width:100%;
                        max-height:100%;
                    }
                    .uploadlabel{
                        display: block;
                        width: 100%;
                        height:100%;
                        cursor: pointer;
                        position:relative;
                        .showupimg{
                            position:absolute;
                            top:0;
                            left:0;
                            right:0;
                            bottom:2px;
                            z-index:9;
                            text-align:center;
                            line-height:142px;
                            background:#fff;
                            img{
                                max-width:100%;
                                max-height:100%;
                                vertical-align: middle;
                            }
                        }
                    }
                }
            }
            .checkcase{
                width:195px;
                text-align:center;
                padding-top:11px;
                font-size:14px;
                font-weight:400;
                color:#2D8DFE;
                line-height:20px;
                float:right;
                cursor: pointer;
                
            }
        }
    }
}
</style>



